/**
 * Created with JetBrains WebStorm.
 * User: Tao
 * Date: 13-3-19
 * Time: 下午3:47
 * To change this template use File | Settings | File Templates.
 */
Ext.application({

    name:'Demo',

    launch:function(){

        Ext.define("User",{
            extend:'Ext.data.Model',

            config:{
                fields:['FirstName','LastName','Age','image_url']
            }
        });

        var userReader = Ext.create('Ext.data.reader.Json',{

            type:'json',
            rootProperty:'books',
            totalProperty:'userCount'
        });
        var pageCount;
        var bookStore = Ext.create('Ext.data.Store',{
           model:'User',
           autoLoad:true,
           proxy:{
            type:'ajax',
            url:'http://192.168.137.1:8080/UserLogin.php',
            reader:userReader
           },
           pageSize:3,
           scope:this,
            listeners:{
                load:function(store,records,successful){
                    if(!successful)
                        Ext.Msg.alert(successful+"");
                    else{
                        var recordCount = userReader.rawData[userReader.getTotalProperty()];
                        var pageSize = this.getPageSize();
                        pageCount = (recordCount - recordCount%pageSize)/pageSize;
                        if(recordCount%pageSize > 0){
                            pageCount += 1;
                        }
                        Ext.getCmp('pageInfo').setText(String(this.currentPage+"/"+pageCount+"页"));
                    }
                }
            }
        });

        var toolbar = Ext.create('Ext.Toolbar',{
           docked:'bottom',
           width:'100%',
           layout:{
               type:'hbox',
               pack:'center'
           },
           items:[
               {
                   iconMask:true,
                   iconCls:'firstpage',
                   handler:function(){
                       bookStore.loadPage(1);
                   }
               },
               {
                   iconMask:true,
                   iconCls:'arrow_left',
                   handler:function(){
                       if(bookStore.currentPage > 1){
                           bookStore.previousPage();
                       }
                   }
               },
               {
                   iconMask:true,
                   iconCls:'arrow_right',
                   handler:function(){
                       if(bookStore.currentPage < pageCount){
                           bookStore.nextPage();
                       }
                   }
               },
               {
                   iconMask:true,
                   iconCls:'lastpage',
                   handler:function(){
                       if(bookStore.currentPage > 1){
                           bookStore.loadPage(pageCount);
                       }
                   }
               },
               {
                   html:'',
                   style:'font-size:16px',
                   id:'pageInfo'
               }
           ]
        });
        var bookTemplete = new Ext.XTemplate(

            '<tpl for=".">',
            '<div class="Book_img"><img src="{image_url}" width="80"/></div>',
            '<div class="Book_info">',
            '<h2>{FirstName}</h2><br><h3>作者: {LastName}</h3>',
            '<p>{Age}</p>',
            '</div>',
            '</tpl>'
        );

        var dataview = Ext.create('Ext.DataView',{
           store:bookStore,
           itemTpl:bookTemplete,
           items:toolbar,
           baseCls:'Book'
        });
        Ext.Viewport.add(dataview);
    }
});